<template>
  <div class="container">
    <div class="vTitle"><span>血压管理</span></div>
    <div class="cardContainer">
      <div class="card" ref="card">
        <div class="left">
          <div class="info">
            <div class="user">
              <div class="item">
                <div class="label">姓名</div>
                <div class="value">{{ data.userInfo.username }}</div>
              </div>
              <div class="item">
                <div class="label">出生日期</div>
                <div class="value">{{ data.userInfo.birthday }}</div>
              </div>
              <div class="item">
                <div class="label">年龄</div>
                <div class="value">{{ data.userInfo.age }}</div>
              </div>
            </div>
            <div class="standardPeroid">
              <div class="standard">
                <div class="item">
                  <div class="label">标准高压</div>
                  <div class="value">120</div>
                  <div class="unit">mmHg</div>
                </div>
                <div class="item">
                  <div class="label">标准低压</div>
                  <div class="value">80</div>
                  <div class="unit">mmHg</div>
                </div>
                <div class="item">
                  <div class="label">脉搏</div>
                  <div class="value">60</div>
                  <div class="unit">次/分</div>
                </div>
              </div>
              <div class="peroid">
                <div class="label">监测周期</div>
                <div class="value">
                  {{
                    data.recordList.length > 0
                      ? formatTimestamp(data.recordList[0].date, true)
                      : ""
                  }}
                </div>
                <div class="gap">-</div>
                <div class="value">
                  {{
                    data.recordList.length > 0
                      ? formatTimestamp(
                          data.recordList[data.recordList.length - 1].date,
                          true
                        )
                      : ""
                  }}
                </div>
              </div>
            </div>
          </div>
          <highcharts
            :options="data.chartOption"
            class="highChart"
          ></highcharts>
        </div>
        <div class="right">
          <table class="table">
            <thead>
              <tr>
                <th>日期</th>
                <th>高压<br />(mmHg)</th>
                <th>低压<br />(mmHg)</th>
                <th>脉搏<br />(次/分)</th>
              </tr>
            </thead>
            <tbody :style="{ maxHeight: data.tableMaxHeight }">
              <tr v-for="(item, index) in data.recordList" :key="index">
                <td>{{ formatTimestamp(item.date) }}</td>
                <td>{{ item.highpressure }}</td>
                <td>{{ item.lowpressure }}</td>
                <td>{{ item.pulse }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { recordList, userInfo } from "@/api/index";
import { useRoute } from "vue-router";
const route = useRoute();
console.log("ID参数:", route.query.id);
const card = ref(null); // 获取 card 容器引用

const data = reactive({
  tableMaxHeight: "0px",
  recordList: [],
  userInfo: {},
});
data.chartOption = {
  title: {
    text: "血压记录监测表",
    align: "center",
  },
  tooltip: {
    shared: true, // 显示所有系列数据
    crosshairs: true, // 显示十字准星线
    style: {
      fontSize: "14px",
    },
  },
  yAxis: [
    {
      // 改为数组格式配置多轴
      title: {
        text: "血压 (mmHg)",
      },
      labels: {
        style: {},
      },
      plotLines: [
        {
          color: "#FF6B6B", // 高压参考线颜色
          width: 1,
          value: 120, // 标准高压值
          dashStyle: "DashDot",
          label: {
            text: "标准高压 120 mmHg",
            align: "left",
            style: {
              color: "#FF6B6B",
            },
            y: -10, // 标签垂直偏移
          },
          zIndex: 5, // 确保显示在最上层
        },
        {
          color: "#4D96FF", // 低压参考线颜色
          width: 1,
          value: 80, // 标准低压值
          dashStyle: "DashDot",
          label: {
            text: "标准低压 80 mmHg",
            align: "left",
            style: {
              color: "#4D96FF",
            },
            y: 16, // 标签垂直偏移
          },
          zIndex: 5,
        },
      ],
    },
    {
      title: {
        text: "脉搏 (次/分)",
      },
      opposite: true, // 显示在右侧
      min: 0,
      max: 140,
      labels: {
        style: {},
      },
      gridLineWidth: 0, // 可选隐藏网格线
      plotLines: [
        {
          color: "#41b883", // 低压参考线颜色
          width: 1,
          value: 60, // 标准低压值
          dashStyle: "DashDot",
          label: {
            text: "标准脉搏 60 次/分",
            align: "left",
            style: {
              color: "#41b883",
            },
            y: 16, // 标签垂直偏移
          },
          zIndex: 5,
        },
      ],
    },
  ],
  plotOptions: {
    series: {
      marker: {
        enabled: false,
      },
    },
  },
  xAxis: {
    categories: [],
  },
  series: [],
};
const formatTimestamp = (timestamp, full) => {
  const date = new Date(timestamp * 1000); // 转为毫秒
  const pad = (n) => n.toString().padStart(2, "0"); // 补零函数
  if (full) {
    return [
      date.getFullYear(),
      pad(date.getMonth() + 1), // 月份从0开始
      pad(date.getDate()), // 日期
    ].join("-");
  } else {
    return [
      // date.getFullYear(),
      pad(date.getMonth() + 1), // 月份从0开始
      pad(date.getDate()), // 日期
    ].join("-");
  }

  // " " +
  // [
  //   pad(date.getHours()), // 24小时制（若需12小时制见下方说明）
  //   pad(date.getMinutes()),
  //   // pad(date.getSeconds()),
  // ].join(":")
};
const getUserInfo = () => {
  userInfo({
    id: route.query.id,
  }).then((res) => {
    if (res.code == 200) {
      data.userInfo = res.data;
    }
  });
};
const getRecordList = () => {
  recordList({
    patientid: route.query.id,
    pageSize: 100,
  }).then((res) => {
    if (res.code == 200 && res.data?.records?.length > 0) {
      data.recordList = res.data?.records.reverse();
      const highList = data?.recordList?.flatMap((record) => {
        const value = Number(record.highpressure);
        return isNaN(value) ? [] : [value];
      });
      const lowList = data?.recordList?.flatMap((record) => {
        const value = Number(record.lowpressure);
        return isNaN(value) ? [] : [value];
      });
      const pulseList = data?.recordList?.flatMap((record) => {
        const value = Number(record.pulse);
        return isNaN(value) ? [] : [value];
      });
      const dateList = data?.recordList?.flatMap((record) => {
        const value = formatTimestamp(record.date,true);
        return [value];
      });
      data.highList = { name: "高压", data: highList, color: "#FF6B6B" };
      data.lowList = { name: "低压", data: lowList, color: "#4D96FF" };
      data.pulseList = {
        name: "脉搏",
        data: pulseList,
        yAxis: 1,
        color: "#41b883",
      };
      data.dateList = dateList;
      data.chartOption.series = [data.highList, data.lowList, data.pulseList];
      data.chartOption.xAxis.categories = data.dateList;
      console.log(data.chartOption);
    }
  });
};
const calculateHeight = () => {
  if (card.value) {
    const cardHeight = card.value.offsetHeight;
    data.tableMaxHeight = `${cardHeight - 69}px`; // 核心计算逻辑
  }
};
onMounted(() => {
  nextTick(() => {
    getUserInfo();
    getRecordList();
    calculateHeight(); // 确保 DOM 渲染完成
    window.addEventListener("resize", calculateHeight); // 响应窗口变化
  });
});
</script>

<style lang="less" scoped>
.container {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.cardContainer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 10px;
  .card {
    background: var(--bs-bg-color);
    flex-grow: 1;
    width: 1400px;
    box-shadow: rgba(9, 30, 66, 0.14) 0px 4px 8px -2px,
      rgba(9, 30, 66, 0.04) 0px 0px 0px 1px;
    display: flex;
    .left {
      flex-grow: 1;
    }
    .right {
      width: 400px;
      border-left: var(--bs-border-color) 1px solid;
    }
  }
}
.table {
  /* 关键样式 */
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}

.table thead {
  /* 固定表头 */
  position: sticky;
  top: 0;
  background: #fff; /* 避免透明遮挡 */
  z-index: 1; /* 确保在内容上方 */
  font-size: 14px;
  border-bottom: var(--bs-border-color) 1px solid;
  th {
    padding: 10px 0;
  }
}

.table tbody {
  /* 表格主体限制高度 */
  display: block;
  overflow-y: auto;
  tr {
    border-bottom: var(--bs-border-color) 1px solid;
    &:nth-child(2n) {
      background: var(--bs-light-color);
    }
  }
  td {
    text-align: center;
    padding: 6px 0;
    &:nth-child(1) {
      padding-left: 10px;
    }
  }
}

/* 保持表头与内容列宽一致 */
.table thead,
.table tbody tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.info {
  .label {
    color: var(--bs-theme-color);
    font-weight: bold;
  }
  .user {
    display: flex;
    flex-wrap: wrap;
    border-bottom: var(--bs-border-color) 1px solid;
    background: var(--bs-light-color);
    .item {
      flex-grow: 1;
      padding: 14px;
      text-align: center;
      border-right: var(--bs-border-color) 1px solid;
      &:last-child {
        border: none;
      }
      .value {
        padding: 14px;
        padding-bottom: 0;
      }
    }
  }
  .standardPeroid {
    display: flex;
    justify-content: space-between;
    .standard {
      display: flex;
      flex-grow: 1;
      .item {
        display: flex;
        flex-grow: 1;
        padding: 14px;
        gap: 10px;
      }
    }
    .peroid {
      display: flex;
      gap: 30px;
      padding: 14px;
    }
  }
}
.highChart {
  height: 680px;
}
</style>